<template>
	<view class="user-profile-panel">
		<!-- 用户信息区域 -->
		<view class="user-info fcsb mb45">
			<view class="user-main fc">
				<image class="avatar" :src="userInfo.avatar || '/static/images/user/head.svg'"></image>
				<view class="user-detail ml30">
					<view class="user-name fc">
						<text class="nickname f34bc0">{{ userInfo.nickname || '未设置昵称' }}</text>
						<image class="edit-icon" src="/static/images/user/Frame.svg" @click="$emit('edit-profile')" />
					</view>
					<text class="phone f245c5">{{ userInfo.phone || '未绑定手机号' }}</text>
				</view>
			</view>
			<view class="logout-btn fcc f225c3" @click="$emit('logout')">
				<text>退出</text>
			</view>
		</view>

		<!-- 收藏统计 -->
		<view class="collection-stats mb20">
			<text class="title mb15 f24Bc3">我的收藏</text>
			<view class="stats-grid fcsb ml14">
				<view class="stat-item fcolcc" @click="$emit('policy')">
					<text class="count f40bc398DFB">{{ userInfo.policy_num || 0 }}</text>
					<text class="label f225c3">惠企政策</text>
				</view>
				<view class="stat-item fcolcc" @click="$emit('supply')">
					<text class="count f40bc398DFB">{{ userInfo.supply_demand_num || 0 }}</text>
					<text class="label f225c3">我的供需</text>
				</view>
				<view class="stat-item fcolcc" @click="$emit('talent')">
					<text class="count f40bc398DFB">{{ userInfo.talents_num || 0 }}</text>
					<text class="label f225c3">人才需求</text>
				</view>
				<view class="stat-item fcolcc" @click="$emit('intention')">
					<text class="count f40bc398DFB">{{ userInfo.space_num || 0 }}</text>
					<text class="label f225c3">意向空间</text>
				</view>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" v-for="(item, index) in menuItems" :key="index"
				@click="$emit('navigate', item.path)">
				<view class="item-content fcsb">
					<view class="item-left fc">
						<image class="item-icon" :src="item.icon"></image>
						<text class="item-name ml22">{{ item.name }}</text>
					</view>
					<image class="item-arrow" :src="item.go"></image>
				</view>
				<up-line v-if="item.line"></up-line>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		userInfo: {
			type: Object,
			required: true,
			default: () => ({
				openid: '',
				nickname: '',
				avatar: '',
				gender: 0,
				real_name: '',
				lang_code: 'zh',
				phone: '',
				is_auth: 0,
				policy_num: 0,
				supply_demand_num: 0,
				talents_num: 0,
				space_num: 0
			})
		},
		menuItems: {
			type: Array,
			required: true,
			default: () => []
		}
	})

	defineEmits([
		'logout',
		'edit-profile',
		'navigate',
		'policy',
		'supply',
		'talent',
		'intention'
	])
</script>

<style lang="scss" scoped>
	.user-profile-panel {
		width: 100%;

		.user-info {
			width: 100%;

			.user-main {
				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.user-detail {
					.user-name {
						.nickname {
							max-width: 300rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.edit-icon {
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}

					.phone {
						color: #5C5C5C;
					}
				}
			}

			.logout-btn {
				width: 100rpx;
				height: 50rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 500rpx;
				border: 2rpx solid #ffffff;
			}
		}

		.collection-stats {
			width: 100%;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				color: #3B3B3B;
				font-weight: bold;
			}

			.stats-grid {
				.stat-item {
					flex: 1;

					.count {
						color: #398DFB;
						margin-bottom: 8rpx;
					}

					.label {
						color: #5C5C5C;
					}
				}
			}
		}

		.function-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;

			.function-item {
				padding: 0 28rpx;

				.item-content {
					height: 108rpx;

					.item-left {
						.item-icon {
							width: 38rpx;
							height: 38rpx;
						}

						.item-name {
							font-size: 28rpx;
							color: #3B3B3B;
						}
					}

					.item-arrow {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	}
</style>